<template>
	<div class="table clearfix">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-menu"></i> 政务百科</el-breadcrumb-item>
				<el-breadcrumb-item>事项维护</el-breadcrumb-item>
				<el-breadcrumb-item>事项内容</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="caidan clearfix">
			<p v-for="(a,index) in item" v-show="a.hide" :class="{'active':active == a.index}" :key="index" @click="dianji('',a)">
				{{a.title}}
			</p>
		</div>
		<router-view></router-view>
	</div>
</template>
<script>
	export default {
		name: 'shixiangadd',
		props: {
			id: {
				type: String
			},
			shoufei: {
				type: String
			}
		},
		data() {
			return {
				item: [{
					index: '/mulu',
					title: '目录清单',
					hide:true
				}, {
					index: '/shishi',
					title: '实施清单',
					hide:true
				}, {
					index: '/kuozhan',
					title: '扩展信息',
					hide:true
				}, {
					index: '/shoufei',
					title: '收费情况',
					hide:false
				}, {
					index: '/banli',
					title: '办理流程',
					hide:true
				}, {
					index: '/ziduan',
					title: '字段清单',
					hide:true
				}, {
					index: '/cailiao',
					title: '材料清单',
					hide:true
				}, {
					index: '/duanxin',
					title: '短信模板',
					hide:true
				}, {
					index: '/fujian',
					title: '附件上传',
					hide:true
				}],
				active: ''
			};
		},
		watch: {
			'shoufei': function(n, o) { //根据扩展信息选项监控传值信息
				this.shishi(n)
			}
		},
		mounted() {
			this.duibi();
			this.sf();
		},
		methods: {
			shishi(val) {//根据传值修改tab
				if (val == '0') {
					if (this.item[3].title == "收费情况")
						this.item[3].hide=false
				} else {
					if (this.item[3].hide == true) {
						return false
					}
					this.item[3].hide=true
				}
			},
			sf() {//监控收费信息。实时更改tab
				if (this.$route.query.id) {
					this.$get("/item/extend/charge/" + this.$route.query.id).then(r => {
						if (!r.data.data) {
							if (this.item[3].title == "收费情况")
								this.item[3].hide=false
							if(this.$route.path == '/shoufei'){
								this.dianji("/banli")
							}
						} else {
							if (this.item[3].hide == true) {
								return false
							}
							this.item[3].hide=true
						}
					})
				}
			},
			dianji(url,a) {//跳转监控itemcode。没有则跳转到目录清单
				if (!this.$route.query.id) {
					return this.$alert('请先添加目录清单', '提示', {
						confirmButtonText: '确定',
						callback: action => {
							this.$router.push({
								path: '/mulu'
							})
						}
					});
				}
				var sj = {}
				if (this.$route.query.data) {//判断是否是合并事项
					sj = {
						"id": this.$route.query.id,
						'data': this.$route.query.data ? this.$route.query.data : ''
					}
				} else {
					sj = {
						"id": this.$route.query.id
					}
				}
				this.$router.push({
					path: url?url:a.index,
					query: sj
				})
			},
			duibi() {//选中tab
				var url = this.$route.path;
				for (var i in this.item) {
					if (url == this.item[i].index) {
						this.active = this.item[i].index
					}
				}
			},
			//添加菜单     
		}
	};
</script>
<style>
	.juzhong {
		margin: 20px 10px!important 

	}
</style>
<style scoped>
	.el-menu-demo {
		margin-bottom: 20px;
	}

	.caidan {
		border-bottom: solid 1px #ccc;
		margin-bottom: 10px;
	}

	.caidan p {
		float: left;
		margin-top: 5px;
		font-size: 18px;
		margin-right: 20px;
		cursor: pointer;
		padding: 5px 0;
	}

	.active {
		border-bottom: solid 2px #409EFF;
	}
</style>
